import { Table, Button, Space, Link,  Popconfirm, Message } from '@arco-design/web-react';
import { useEffect } from 'react';
import { fetchModuleList, fetchModuleDelete, fetchChangeModuleStatus } from '../../../../api/common'
const style = {
  margin: 0,
};
function ModuleList({state, setState}){

  function moduleHidden(id){
    setState(state=>{
      return{
        ...state,
        moduleList: {
            ...state.moduleList,
            loading: true
        }
    }
    })
    function funForHidden(list){
      list.map(module=>{
        if (module.id == id){
          if (module.status){
            module.status = false
            module.hidden = 1
            return
          }
          module.status = true
          module.hidden = 0
          return
        }
        if (module.children && module.children.length > 0){
          funForHidden(module.children)
        }
      })
    }
    let tmp = [...state.moduleList.data]
    funForHidden(tmp)
    setState(state=>{
      return{
        ...state,
        moduleList: {
            ...state.moduleList,
            loading: false,
            data: tmp
        }
      }
    })
  }

  function moduleDel(id){
    setState(state=>{
      return{
        ...state,
        moduleList: {
            ...state.moduleList,
            loading: true
        }
      }
    })
    function funForDel(list){
      list.map(moudle=>{
        if (moudle.children && module.children.length > 0){
          for(let i = 0; i < moudle.children.length; i++){
            let index = i
            if (moudle.children[i].id == id){
              moudle.children.splice(i, 1)
              return
            }
            if (moudle.children[i].children && moudle.children[i].children.length > 0){
              funForDel(moudle.children[i])
            }
          }
        }
      })
    }
    let tmp = [...state.moduleList.data]
    funForDel(tmp)
    setState(state=>{
      return{
        ...state,
        moduleList: {
            ...state.moduleList,
            loading: false,
            data: tmp
        }
      }
    })
  } 

    // 列
    const columns = [
        {
          title: '功能',
          dataIndex: 'resName',
          key: 'col1'
        },
        {
          title: '操作',
          dataIndex: 'operation',
          render: (col, record, index) => {
            return(
                <Space size='mini'>
                  <Button type='text' style={{padding: '0'}}
                          onClick={()=>{
                            console.log('record', record)
                            setState(state=>{
                              return{
                                ...state,
                                moduleAdd: {
                                  ...state.moduleAdd,
                                  visible: true,
                                  data: record
                                }
                              }
                            })
                          }}>新增
                  </Button>|
                  <Button type='text' style={{padding: '0'}}
                          onClick={()=>{
                            setState(state=>{
                              return{
                                ...state,
                                moduleModify: {
                                  ...state.moduleModify,
                                  visible: true,
                                  data: record
                                }
                              }
                            })
                          }}>修改
                  </Button>|
                { !record.top ? (<>
                                    <Popconfirm
                                      focusLock
                                      title='确认删除？'
                                      content=''
                                      onOk={() => {
                                        fetchModuleDelete({id: record.id},
                                          ()=>{
                                            moduleDel(record.id)
                                            Message.success({
                                              content: '删除成功',
                                            });
                                          },
                                          ()=>{
                                            Message.error({
                                              content: 'error',
                                            });
                                          })
                                      }}
                                      onCancel={() => {
                                      }}>
                                      <Button type='text' style={{padding: '0'}}>删除</Button>|
                                    </Popconfirm>

                                  </>) : null}
                <Popconfirm
                  focusLock
                  title={`确认${record.hidden === 0 ? '隐藏' : '显示'}该模块`}
                  content=''
                  onOk={() => {
                    fetchChangeModuleStatus({ id: record.id, hidden: record.hidden },
                      ()=>{
                        moduleHidden(record.id)
                        Message.success({
                          content: `已${record.hidden === 0 ? '隐藏' : '显示'}`,
                        });
                      },
                      ()=>{
                        Message.errer({
                          content: 'error',
                        });
                      })
                  }}
                  onCancel={() => {
                  }}>
                  <Button type='text' style={{padding: '0'}}>{ record.hidden === 0 ? '隐藏' : '显示' }模块</Button>|
                </Popconfirm>
                <Button type='text' style={{padding: '0'}} 
                        onClick={()=>{
                          setState(state=>{
                            return{
                              ...state,
                              buttonModal: {
                                ...state.buttonModal,
                                buttonList:{
                                  ...state.buttonModal.buttonList,
                                  changeFlag: !state.buttonModal.buttonList.changeFlag
                                },
                                visible: true
                              }
                            }
                          })
                        }}>
                  按钮权限
                </Button></Space>
              )
          },
          key: 'col2'
        },
        {
          title: '状态',
          dataIndex: 'state',
          render: (col, record, index) => (
            record.status ? (<Link status='success'>已上线</Link>) : (<Link status='error'>未上线</Link>)
          ),
          key: 'col3'
        },
    ];

    // 获取module列表
    function getTableList(){
      console.log('sadsadsad')
      setState(state=>{
        return{
          ...state,
          moduleList: {
              ...state.moduleList,
              loading: true
          }
      }
      })
      fetchModuleList({},
          (resp)=>{
            console.log('setFalse')
              setState(state=>{
                return{
                  ...state,
                  moduleList: {
                      ...state.moduleList,
                      loading: false,
                      data: resp.data.list
                  }
              }
              })
          },
          ()=>{
          }
      )
    }

  

    useEffect(()=>{
      getTableList()
    },[])

    return(
        <Table 
          loading = {state.moduleList.loading}
          indentSize={60} 
          columns={columns} 
          data={state.moduleList.data} borderCell='true'
          pagination={false}/>
    )
}

export default ModuleList